import { useCallback, useState } from "react";
import { useWinEventLis } from "../../hooks/useEventListener";

export default function ListenWinEvent() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  // 监听鼠标移动事件 将事件回调 改成具名函数
  // const handleMouseMove = (e: MouseEvent) => {
  //   setPosition({ x: e.clientX, y: e.clientY });
  // };
  // handleMouseMove 包裹 useCallback
  const handleMouseMove = useCallback((e : MouseEvent) => {
    setPosition({ x: e.clientX, y: e.clientY });
  },[]);


  useWinEventLis('mousemove', handleMouseMove);
  
  return (
    <div style={{
      position: 'absolute',
      backgroundColor: 'pink',
      borderRadius: '50%',
      opacity: 0.6,
      transform: `translate(${position.x}px, ${position.y}px)`,
      pointerEvents: 'none',
      left: -20,
      top: -20,
      width: 40,
      height: 40,
    }} />
  );
}